<!-- 合同范本 页面 -->
<template>
	<view class="contract-container-box">
		<!-- 顶部显示搜索区域 -->
		<u-sticky><search placeholder="搜索标题" @change="searchChange"></search></u-sticky>
		<view class="contrach-template-item" v-for="tempItem in contractDataList" :key="tempItem.id" @click="tempItemClick(tempItem.id)">
			<view class="img-box"><u-image width="52" height="65" :src="vuex_url + '/static/imgs/word.png'"></u-image></view>
			<view class="u-line-1">{{ tempItem.title }}</view>
			<view class="time-text">{{ tempItem.create_time }}</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			sortData: {
				page: 1,
				page_size: 10,
				keyword: '',	// 搜索标题
			},
			// 模拟的默认展示的合同范本列表数据
			contractDataList: []
		};
	},
	onLoad() {
		this.getDataList()
	},
	async onPullDownRefresh() {
		this.sortData.page = 1
		this.contractDataList = []
		await this.getDataList()
		uni.stopPullDownRefresh()
		this.$u.toast('页面数据已刷新')
	},
	onReachBottom() {
		this.sortData.page += 1
		this.getDataList()
	},
	methods: {
		async getDataList() {
			const res = await this.$u.api.getDocumentList(this.sortData)
			if(!res) return
			if(res.length < 1) return this.sortData.page = this.sortData.page < 2 ? 1 : (this.sortData.page - 1)
			this.contractDataList = [...this.contractDataList, ...res]
			// console.log(this.contractDataList);
		},
		// 搜索框内容变化事件
		searchChange(keyword) {
			console.log('keyword', keyword);
			this.sortData.keyword = keyword
			this.sortData.page = 1
			this.contractDataList = []
			this.getDataList()
		},
		// 页面数据项的点击事件(携参跳转到第二层合同列表页)
		tempItemClick(id) {
			// this.$u.route('/myPackageA/pages/views/search-contract?id=' + id);
			this.$u.route('/myPackageA/pages/views/contract-template-detail?id=' + id);
		}
	}
};
</script>

<style lang="scss" scoped>
.contract-container-box {
	width: 750rpx;
	min-height: 100vh;
	.search-box {
		height: 76rpx;
		line-height: 76rpx;
		text-align: center;
		background: #e8e8e8;
		border-radius: 10rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #999999;
		margin: 0 26rpx;
	}
	.contrach-template-item {
		margin-top: 50rpx;
		height: 113rpx;
		padding: 16rpx 26rpx 18rpx 100rpx;
		border-bottom: 1px solid #f5f5f5;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		position: relative;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #141418;
		.img-box {
			position: absolute;
			top: 50%;
			left: 26rpx;
			transform: translateY(-50%);
		}
		.time-text {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #999999;
		}
	}
}
</style>
